<template>
  <van-nav-bar class="nav-bar" :fixed="true" :placeholder="true" :z-index="100"
               @click-left="onClickLeft"
  >
    <template #left>
      <i class="iconfont">&#xe744;</i>
      <slot>
      </slot>
    </template>
    <template #title>
      <span class="title" v-if="showTitle">黑马头条</span>
    </template>
    <template #right>
      <i class="iconfont search" @click="onClickRight1">&#xe7b5;</i>
      <van-icon name="more-o" size="24px" color="#fff" @click="onClickRight2"/>
    </template>
  </van-nav-bar>
</template>

<script>
export default {
  name: 'NavBar',
  data () {
    return {
      showTitle: true
    }
  },
  methods: {
    onClickLeft () {
      this.$router.go(-1)
    },
    onClickRight1 () {
      // this.$router.push({ name: 'Search' })
      this.$emit('clickRight1')
    },
    onClickRight2 () {
      this.$emit('clickRight2')
    }
    // 切换
    // toggle () {
    //   this.showTitle=false
    // }
  }
}
</script>
<style lang="less" scoped>
.nav-bar {
  .title {
    color: #fff;
  }

  .iconfont {
    font-size: 24px;
    color: #fff;
  }

  .search {
    margin: 10px;
  }

  ::v-deep .van-nav-bar__content {
    background: @color-bg;
  }

}

</style>
